import xComp from "./xComp.js";
import {replaceByObj} from './xUtil.js';

const tmplBase =`<div class="{{class}}">
                       <div class="input-group mb-3 ghead">
                       </div>
                  </div>`;

const tmplAddon = '<span class="input-group-text {{iclass}}" data-key="{{dataKey}}">{{html}}</span>';
const tmplInput = '<input type="text" class="form-control">';

export default class xGroupInput extends xComp{

    $root;
    $head;

    constructor(cfg) {
        super();
        this.$root = $('#' + cfg.el);
        this.$root.html(tmplBase.replace('{{class}}', cfg.style||'ginput'));
        this.vCfg = cfg;
        this.init();

    };

    init(){
        this.$head = this.$root.find(".ghead");
        this.render();
        this.$input = this.$root.find('input');
        this.$input.on('input',this.evInput.bind(this));
        this.$input.on('blur',this.evBlur.bind(this));

        if(this.vCfg.readonly)
            this.setReadonly(true);
    }

    render(){
        let prepare ='',append ='';
        if(this.vCfg.prepare || this.vCfg.prepareClass)
            prepare = replaceByObj(tmplAddon,{dateKey:'prepare',
                iclass:this.vCfg.prepareClass||'',html:this.vCfg.prepare||''});
        if(this.vCfg.append || this.vCfg.appendClass)
            append = replaceByObj(tmplAddon,{dateKey:'append',
                iclass:this.vCfg.appendClass||'',html:this.vCfg.append||''});

        this.$head.html(prepare+tmplInput+append);
    }

    initValue(value){
        this.$input.val(value);
    }

    renderStatus(action,status){
        if(action=='add'){
            this.$head.addClass(status);
        }else{
            this.$head.removeClass(status);
        }
    }

    evInput(e){
        //this.renderStatus();
        if(this.vBindEvent)
            this.vBindEvent(this.$input.val());
    }

    evBlur(e){
        //this.renderStatus();
        this.verify();
    }

    verify(){
        let result = true;
        let valid ;
        let value = this.$input.val();
        /*
        三种情况
        1 强制+正则
        2 强制无正则
        3 正则无强制
        4 无强制无正则
        * */
        if(this.vCfg.mandatory && this.vCfg.pattern){
            this.vCfg.pattern.lastIndex=0;
            if(!this.vCfg.pattern.test(value)){
                valid = -1;
                result = false;
            }
            else
                valid = 1 ;
        };


        if(!this.vCfg.mandatory && this.vCfg.pattern){
            this.vCfg.pattern.lastIndex=0;
            if(value){
                if(this.vCfg.pattern.test(value)){
                    valid =1;
                }else{
                    valid = -1 ;
                    result = false;
                }
            }else
                valid = 0;
        };

        if(this.vCfg.mandatory && !this.vCfg.pattern){
            //要考虑 switch 的情况
            if(!value){
                valid = -1;
                result = false;
            }
            else
                valid = 1 ;
        };

        if(! this.vCfg.mandatory && !value)
            valid = 0;

        switch(valid){
            case 1:
                this.renderStatus("remove",'invalid');
                this.renderStatus("add","valid");
                break;
            case -1:
                this.renderStatus("remove",'valid');
                this.renderStatus("add","invalid");
                break;
            case 0:
                this.renderStatus("remove",'valid');
                this.renderStatus("remove",'invalid');
                break;
        }

        return result;
    }

    setReadonly(status){
        this.vCfg.readonly = status;
        if(status){
            this.renderStatus("add","readonly");
            this.$input.attr("disabled","true")
        }else{
            this.renderStatus("remove","readonly");
            this.$input.removeAttr("disabled")
        }
    }

    getValue(){
        return this.$input.val();
    }

}